<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model 综合演示</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>知识点1：v-model双向绑定</h1>

        <h3>1. 单行文本框</h3>
        姓名：<input type="text" v-model="singleText"> 尊敬的 {{ singleText }} 用户你好

        <h3>2. 多行文本框</h3>
        介绍：<textarea v-model="multiText"></textarea>
        <br>我输入的介绍是：{{ multiText }}

        <h3>3. 单选框</h3>
        性别：
        <input type="radio" value="男神" v-model="radioValue"> 男神
        <input type="radio" value="女神" v-model="radioValue"> 女神
        <br>原来你是个 {{ radioValue }} 啊！

        <h3>4. 单个复选框</h3>
        <input type="checkbox" v-model="toggleValue"> 是否哈气
        <br>{{ toggleValue }}

        <h3>5. 多个复选框</h3>
        <input type="checkbox" value="唱歌" v-model="checkbox1">唱歌
        <input type="checkbox" value="跳舞" v-model="checkbox1">跳舞
        <input type="checkbox" value="游戏" v-model="checkbox1">游戏
        <input type="checkbox" value="哈气" v-model="checkbox1">哈气
        <input type="checkbox" value="达斯" v-model="checkbox1">达斯
        <br>你的爱好是：{{ checkbox1.join(',') }}

        <h3>6. 单项下拉框</h3>
        my favorite course
        <select v-model="singleSelect">
            <option value="java">java</option>
            <option value="python">python</option>
            <option value="c++">c++</option>
            <option value="vue">vue</option>
        </select>
        <br>我知道你最喜欢的课程是: {{ singleSelect }}

        <h3>7. 多项下拉框</h3>
        选择哪些人去扫地：
        <select multiple v-model="multiSelect">
            <option value="A">我是哈基米</option>
            <option value="B">我是耄耋</option>
            <option value="C">我是大黄</option>
            <option value="D">我是曼波</option>
            <option value="E">我是哈哈哈</option>
        </select>
        <br>我挑选了这些人：{{ multiSelect.join(',') }}

        <h1>测试</h1>
        用户名：<input type="text" v-model="username">
        <br>密码：<input type="password" v-model="password">
        <br>确认密码：<input type="password" v-model="confirmPwd">
        <br>性别：
        <input type="radio" value="男" v-model="gender"> 男
        <input type="radio" value="女" v-model="gender"> 女
        <br>籍贯：
        <select v-model="hometown">
            <option value="台州">台州</option>
            <option value="温州">温州</option>
            <option value="杭州">杭州</option>
            <option value="宁波">宁波</option>
        </select>
        <br>选择的课外课程：
        <input type="checkbox" value="吉他" v-model="courses">吉他
        <input type="checkbox" value="国画" v-model="courses">国画
        <input type="checkbox" value="街舞" v-model="courses">街舞
        <input type="checkbox" value="书法" v-model="courses">书法
        <br>
        <button type="button" @click="submitForm">提交</button>
        <h1>知识点2：v-model修饰符</h1>
        <h3>1.lazy修饰符 v-model在每次input事件触发后将输入框的数据与电量同步，添加lazy修饰符后，改成与change事件同步</h3>
        <input type="text" v-model.lazy="text">{{text}}
        <h3>2.number修饰符，如果用户想自动将输入的值转换为数值型，可以加.number修饰符</h3>
        <input type="text" v-model.number="num">
        {{num+1}}
        <h3>3.trim修饰符，如果想要自动过滤前后的空白字符，可以加trim修饰符</h3>
        <input type="text" v-model.trim="text">
        {{text+"你好！"}}
    </div>

    <script>
        Vue.createApp({
            data() {
                return {
                    
                    singleText: '',
                    multiText: '',
                    radioValue: '',
                    toggleValue: false,
                    checkbox1: [],          
                    singleSelect: '',
                    multiSelect: [],        
                    username: '',
                    password: '',
                    confirmPwd: '',
                    gender: '',
                    hometown: '',
                    courses: [],
                    text:'',
                    num:''             
                };
            },
            methods: {
                submitForm() {
                    if (this.password !== this.confirmPwd) {
                    alert('两次密码不一致！');
                    return;          
                   }
                    const arr = [
                        `用户名：${this.username}`,
                        `密码：${this.password}`,
                        `确认密码：${this.confirmPwd}`,
                        `性别：${this.gender}`,
                        `籍贯：${this.hometown}`,
                        `选择的课外课程：${this.courses.join('、')}`
                    ];
                    alert(arr.join('\n'));
                }
            }
        }).mount('#app');
    </script>
</body>
</html>